// 引入创建路由器组件
import { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/Home.vue";
import News from "@/views/News.vue";
import About from "@/views/About.vue";
import NewsDetail from "@/views/NewsDetail.vue";
// 创建路由
const router = createRouter({
  // 路由器的工作模式
  history: createWebHistory(),
  routes: [
    {
      // 路由的命名
      name: "shouye",
      path: "/",
      component: Home,
    },
    {
      name: "xinwen",
      path: "/news",
      component: News,
      children: [
        {
          // 路由的命名
          name: "newsDetail",
          // 使用占位符
          path: "detail/:id/:title/:content",
          component: NewsDetail,

          // 第一种：将路由接收到的所有params参数作为props传递给路由组件
          // props: true,

          // 第二种：函数写法-可以自己决定将什么参数传递给路由组件
          props(route) {
            // console.log(route);
            return {
              id: route.params.id,
              title: route.params.title,
              content: route.params.content,
            };
          },

          // 第三种：对象写法-可以自己决定将什么参数传递给路由组件
          // props: {
          //   id: 100,
          //   title: 200,
          //   content: 300,
          // },
        },
      ],
    },
    {
      name: "guanyu",
      path: "/about",
      component: About,
    },
  ],
});

export default router;
